/* 成绩录入页面思路分析
1.页面一加载,发送ajax请求学员信息列表
2.点击分数td,给当前td动态添加一个input输入框
    * (1)td标签是动态新增的元素,需要注册委托事件
    * (2)学员id和姓名不能修改，只有分数才可以修改
    * (3)输入框默认显示当前点击的td的文本
3.输入框按enter键 : (1)获取输入框文本 (2)发送ajax请求  (3)移除输入框
*/

/* 成绩录入页面总结
1.本页面核心业务
(1)从服务器请求数据
(2)页面编辑数据 ： td点击事件
(3)提交服务器修改：输入框enter事件
2.本页面技术点
(1)Object.keys(对象) ：获取对象所有属性名
(2)事件委托
(3)input.focus() ：自动聚焦
(4)input.select()：自动聚焦+自动选中
(5)行内自定义属性存储stu_id与batch
(6)axios参数错误两种情况：浏览器爆红执行catah方法 */
function fn(){
    axios({
        url: '/score/list',
        method: 'get'
    }).then(res => {
        //成功回调
        console.log(res)
        render(res.data.data)
    })
}
fn()

const render = obj => {
    document.querySelector('tbody').innerHTML = Object.keys(obj).map(item => `
    <tr>          
        <th scope="row">${item}</th>
        <td>${obj[item].name}</td>
        <td class="score" data-stu_id="${item}" data-batch="1">${obj[item].score[0]}</td>
        <td class="score" data-stu_id="${item}" data-batch="2">${obj[item].score[1]}</td>
        <td class="score" data-stu_id="${item}" data-batch="3">${obj[item].score[2]}</td>
        <td class="score" data-stu_id="${item}" data-batch="4">${obj[item].score[3]}</td>
        <td class="score" data-stu_id="${item}" data-batch="5">${obj[item].score[4]}</td>
    <tr>
    `).join('')
}

document.querySelector('tbody').addEventListener('click', function (e) {
    if (e.target.classList.contains('score')) {
        const input = document.createElement('input')
        input.className = 'inp'//设置类名
        input.value = e.target.innerText//设置文本
        e.target.appendChild(input)
        //输入框自动聚焦
        //input.focus()//自动聚焦
        input.select()//自动聚焦+自动选中
        //输入框失去焦点移除输入框
        input.addEventListener('blur', () => input.remove())

        //enter键发送ajax
        /* 需求问题: 在键盘按下事件中,需要通过 td来获取学生id 和 第几次成绩
        发现问题:在键盘按下事件中, e.target 不是指向td，而是指向键盘事件
        解决问题：在函数外面声明一个变量来存储td */
        const td =e.target
        input.addEventListener('keydown',function(e){
            if(e.key==='Enter'){
                //(1)收集数据 ： 根据后台接口参数来收集数据
                //"stu-id: 学生id,batch第几次考试 ,score 考试成绩
                const score =input.value
                const stu_id =td.dataset.stu_id
                const batch =td.dataset.batch
                console.log(stu_id,batch,score);

                axios({
                    url:'/score/entry',
                    method:'post',
                    data:{stu_id,batch,score}
                }).then(res=>{
                    //成功回调
                    console.log(res)
                    Toast.info(res.data.message)
                    if(res.data.code === 0){
                    fn()
                    }
                }).catch(err=>{
                    Toast.fail(err.response.data.message)
                    fn()
                })
            }
        })
    }

})



